<template>
  <div class="postage">
    <div class="postage-header">
      <div class="postage-header-title">
        <van-icon
          name="arrow-left"
          size=".2rem"
          color="white"
          @click="goBack"
        />
        <div class="postage-header-logo">
          <img
            src=""
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="postage-nav">
      <van-tabs
        sticky
        @click="onClick"
        @change="1"
        v-model:active="active"
        title-active-color="#fff"
        title-inactive-color="hsla(0,0%,100%,.6)"
        animated
        background="linear-gradient(90deg, rgb(255, 160, 51) 0%, rgb(255, 128, 48) 100%) 0% 0% / 100%"
      >
        <van-tab
          v-for="nav in navs"
          :key="nav.id"
          :title="nav.title"
          :name="nav.id"
        >
          <Recommend v-if="nav.id === 2" />
          <List v-else />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Recommend from "@/components/PostAgeList/Recommend.vue";
import List from "@/components/PostAgeList/List.vue";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
BScroll.use(Pullup);
export default defineComponent({
  setup() {
    const active = ref(2);

    const store = useStore();
    const state = reactive({
      pageNo: 1,
    });
    const router = useRouter();

    const getPostAgeNav = () => {
      return store.dispatch({
        type: "postAge/getPostAgeNav",
      });
    };

    const getGoodLists = (cid: number, pageNo: number, pageSize: number) => {
      return store.dispatch({
        type: "postAge/getGoodLists",
        params: {
          cid,
          pageNo,
          pageSize,
        },
      });
    };

    const getNiceLists = () => {
      return store.dispatch({
        type: "postAge/getNiceLists",
      });
    };

    const navs = computed(() => {
      return store.state.postAge.navs;
    });

    var id: number;
    const onClick = (cid: number) => {
      getGoodLists(cid, 1, 10);
      id = cid;
      state.pageNo = 1;
    };

    const goBack = () => {
      router.push("/home");
    };
    const getMoreLists = (cid: number) => {
      return store.dispatch({
        type: "postAge/getMoreLists",
        params: {
          cid,
          pageNo: state.pageNo,
          pageSize: 10,
        },
      });
    };
    onMounted(() => {
      getPostAgeNav();
      getNiceLists();
      onClick(2);
      let scroll = new BScroll(".van-tabs__content", {
        click: true,
        pullUpLoad: {
          threshold: 50,
        },
      });
      scroll.on("pullingUp", () => {
        state.pageNo++;
        getMoreLists(id);
        scroll.finishPullUp();
        scroll.refresh();
      });
    });

    return { active, onClick, goBack, navs, ...toRefs(state) };
  },
  components: {
    Recommend,
    List,
  },
});
</script>
<style lang="stylus" scoped>
/deep/.van-tab__pane-wrapper--inactive
    height 100%
/deep/.van-tabs__content
    height 100%
/deep/.van-tabs
    display flex
    flex-direction column
    height 100%
/deep/.van-tabs__track
    height auto !important
/deep/.van-tabs>div
    width 3.75rem
/deep/.van-sticky--fixed
    top .45rem !important
.postage
    display flex
    flex-direction column
    .postage-header
        width 100%
        background linear-gradient(90deg, rgb(255, 160, 51) 0%, rgb(255, 128, 48) 100%) 0% 0% / 100%;
        position fixed
        top 0
        left 0
        z-index 100
        .postage-header-title
            padding 0 .1rem
            height .45rem
            display flex
            justify-content space-between
            align-items center
            .postage-header-logo
                flex 1
                margin-left 1.1rem
                height 100%
                display flex
                align-items center
                img
                    width 0.65rem
                    height 0.22rem
    .postage-nav
        margin-top .45rem
        position fixed
        height 6.22rem
    /deep/.van-tabs__line
        background #fff
</style>
